<html ng-app="cookbookApp">
<head>
  <script src="../vendor/angular.js"></script>
  <script src="application.js"></script>
</head>
<body ng-controller="MainController">
  <h2>With string:</h2>
  <input type="text" ng-model="withString"/>
  <table>
    <tr ng-repeat="user in users | filter:withString">
      <td ng-bind="user.name"></td>
      <td ng-bind="user.age"></td>
      <td ng-bind="user.gender"></td>
    </tr>
  </table>

  <h2>With object:</h2>
  <table>
    <tr ng-repeat="user in users | filter:{ gender: 'male' }:true">
      <td ng-bind="user.name"></td>
      <td ng-bind="user.age"></td>
      <td ng-bind="user.gender"></td>
    </tr>
  </table>

  <h2>With object and wildcard:</h2>
  <input type="text" ng-model="withWildcard"/>
  <table>
    <tr ng-repeat="user in users | filter:{ $: withWildcard, gender: 'female' }">
      <td ng-bind="user.name"></td>
      <td ng-bind="user.age"></td>
      <td ng-bind="user.gender"></td>
    </tr>
  </table>

  <h2>With function:</h2>
  <table>
    <tr ng-repeat="user in users | filter:underForty">
      <td ng-bind="user.name"></td>
      <td ng-bind="user.age"></td>
      <td ng-bind="user.gender"></td>
    </tr>
  </table>
</body>
</html>